<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Picker</view>
			<view class="tui-page__desc">选择器：支持1~3级数据，3级以上数据使用tui-cascade-selection组件。</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto"
				@click="picker__1">一级数据</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="picker__2">二级联动</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="picker__3">三级联动</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="picker__3(1)">默认选中</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto"
				@click="picker__4">暗黑模式</tui-button>
			<view class="tui-result">您的选择结果：{{resulut}}</view>
		</view>
		<!--一级数据-->
		<tui-picker :show="show__1" :pickerData="items__1" @hide="hide" @change="change">
		</tui-picker>
		<!--二级数据-->
		<tui-picker :show="show__2" :layer="2" :pickerData="items__2" :params="1" @hide="hide" @change="change">
		</tui-picker>
		<!--三级数据-->
		<tui-picker :value="value" :show="show__3" :layer="3" :pickerData="items__3" :params="2" @hide="hide"
			@change="change">
		</tui-picker>

		<!--暗黑模式-->
		<tui-picker :maskStyle="maskStyle" backgroundColor="#333" headerBgColor="#333" cancelColor="#bfbfbf"
			confirmColor="#4455FF" color="#fff" :show="show__4" :layer="2" :pickerData="items__2" :params="3"
			@hide="hide" @change="change">
		</tui-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show__1: false,
				items__1: [{
					text: "中国",
					value: "1001"
				}, {
					text: "美国",
					value: "1002"
				}, {
					text: "俄罗斯",
					value: "1003"
				}],
				show__2: false,
				items__2: [{
					text: '广东省',
					value: '100',
					children: [{
						text: '广州市',
						value: '10001'
					}, {
						text: '深圳市',
						value: '10002'
					}]
				}, {
					text: '安徽省',
					value: '200',
					children: [{
						text: '合肥市',
						value: '20001'
					}, {
						text: '安庆市',
						value: '20002'
					}]
				}],
				show__3: false,
				items__3: [{
					text: '广东省',
					value: '100',
					children: [{
						text: '广州市',
						value: '10001',
						children: [{
							text: '天河区',
							value: '1000101'
						}, {
							text: '黄埔区',
							value: '1000102'
						}, {
							text: '从化区',
							value: '1000103'
						}]
					}, {
						text: '深圳市',
						value: '10002',
						children: [{
							text: '福田区',
							value: '1000201'
						}, {
							text: '南山区',
							value: '1000202'
						}]
					}]
				}, {
					text: '安徽省',
					value: '200',
					children: [{
						text: '合肥市',
						value: '20001',
						children: [{
							text: '包河区',
							value: '2000101'
						}, {
							text: '滨湖区',
							value: '2000102'
						}]
					}, {
						text: '安庆市',
						value: '20002',
						children: [{
							text: '桐城市',
							value: '2000201'
						}, {
							text: '怀宁县',
							value: '2000202'
						}]
					}]
				}],
				value: [],
				show__4: false,
				maskStyle: 'background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6)), -webkit-linear-gradient(bottom, rgba(35, 35, 35, .95), rgba(35, 35, 35, .6));',
				resulut: ''
			}
		},
		methods: {
			change(e) {
				console.log(e)
				this.resulut = JSON.stringify(e)
			},
			hide(e) {
				if (e.params === 0) {
					this.show__1 = false
				} else if (e.params == 1) {
					this.show__2 = false
				} else if (e.params == 2) {
					this.show__3 = false
				} else {
					this.show__4 = false;
				}
			},
			picker__1() {
				this.show__1 = true;
			},
			picker__2() {
				this.show__2 = true;
			},
			picker__3(setOptions) {
				if (setOptions == 1) {
					this.value = ['安徽省', '安庆市', '怀宁县'];
				} else {
					this.value = []
				}
				this.show__3 = true;
			},
			picker__4() {
				this.show__4 = true;
			}
		}
	}
</script>

<style>
	.tui-result {
		box-sizing: border-box;
		font-size: 28rpx;
		margin-top: 60rpx;
		word-break: break-all;
	}
</style>
